<form method='post' action='layout.php'>
	<h3><a href="#" class="expand" title="form">Form Layout</a></h3>
	<table width="100%" id="form" style="display:none;">
	<td width='150px'><label for='form1'><center>
			<img src='../../../../../images/template_thumb_b1.png'></label><br />
			<input id="form1" type="radio" name="form" value="form-1col-left" {form_modal1}></center>
		</td>
		<td width='150px'><label for='form2'><center>
			<img src='../../../../../images/template_thumb_b2.png'></label><br />
			<input id="form2" type="radio" name="form" value="form-1col-right" {form_modal2}></center>
		</td></tr>
		<td width='150px'><label for='form3'><center>
			<img src='../../../../../images/template_thumb_b3.png'></label><br />
			<input id="form3" type="radio" name="form" value="form-2cols" {form_modal3}></center>
		</td>
		<td width='150px'><label for='form4'><center>
			<img src='../../../../../images/template_thumb_b4.png'></label><br />
			<input id="form4" type="radio" name="form" value="form-empty" {form_modal4}></center>
		</td>
	</table>
	<h3><a href="#" class="expand" title="colors">Background Layout</a></h3>
<table width="100%" id="colors" style="display:none;">
	<tr><td width="40%"><strong>Div ID</strong></td><td><strong>Color</strong></td><td><strong>Image</strong></td></tr>

	
			<tr><td>Body Background:</td>
			<td>
				<div class='colorSelector'>
					<div id='changebody' style='background-color: {design_color['design_body_background']}; width: 32px; height: 32px;'>
					<input type='hidden' id='design_body_background' name='design_body_background' value='{design_color['design_body_background']}' /></div>
				</div>
			</td>
			<td><select name="body_bgimage"><option value=''>None</option>{body_filesopts}</select>
				<select name="body_bgimage_repeat">
						<option value=''>Repeat All</option>
						<option value='no-repeat'>No Repeat</option>
						<option value='repeat-x'>Repeat X</option>
						<option value='repeat-y'>Repeat Y</option>
				</select></td>
			</tr>
			
			<tr><td>Header Background: </td>
			<td>
				<div class='colorSelector'>
					<div class='colorSelector'>
		<div id='changeheader' style='background-color: {design_color['design_header_background']}; width: 32px; height: 32px;'></div>
		<input type='hidden' id='design_header_background' name='design_header_background' value='{design_color['design_header_background']}' />
	</div>
				</div>
			</td>
			<td><select name="header_bgimage"><option value=''>None</option>{header_filesopts}</select>
				<select name="header_bgimage_repeat">
						<option value=''>Repeat All</option>
						<option value='no-repeat'>No Repeat</option>
						<option value='repeat-x'>Repeat X</option>
						<option value='repeat-y'>Repeat Y</option>
				</select></td>
			</tr>
			
			<tr><td>Footer Background: </td>
			<td>
	<div class='colorSelector'>
		<div id='changefooter' style='background-color: {design_color['design_footer_background']}; width: 32px; height: 32px;'></div>
		<input type='hidden' id='design_footer_background' name='design_footer_background' value='{design_color['design_footer_background']}' />
	</div>
			</td>
			<td><select name="footer_bgimage"><option value=''>None</option>{footer_filesopts}</select>
				<select name="footer_bgimage_repeat">
						<option value=''>Repeat All</option>
						<option value='no-repeat'>No Repeat</option>
						<option value='repeat-x'>Repeat X</option>
						<option value='repeat-y'>Repeat Y</option>
				</select></td>
			</tr>
			
			<tr><td>Sidebar Background </td>
			<td>
				<div class='colorSelector'>
					<div id='changesidebar' style='background-color: {design_color['design_sidebar_background']}; width: 32px; height: 32px;'></div>
					<input type='hidden' id='design_sidebar_background' name='design_sidebar_background' value='{design_color['design_sidebar_background']}' />
				</div>
			</td>
			<td><select name="sidebar_bgimage"><option value=''>None</option>{sidebar_filesopts}</select>
				<select name="sidebar_bgimage_repeat">
						<option value=''>Repeat All</option>
						<option value='no-repeat'>No Repeat</option>
						<option value='repeat-x'>Repeat X</option>
						<option value='repeat-y'>Repeat Y</option>
				</select></td>
			</tr>		
			<tr><td>Content Background Color: </td>
			<td>
				<div class='colorSelector'>
					<div id='changecontent' style='background-color: {design_color['design_content_background']}; width: 32px; height: 32px;'></div>
					<input type='hidden' id='design_content_background' name='design_content_background' value='{design_color['design_content_background']}' />
				</div>
			</td>
			<td><select name="content_bgimage"><option value=''>None</option>{content_filesopts}</select>
				<select name="content_bgimage_repeat">
						<option value=''>Repeat All</option>
						<option value='no-repeat'>No Repeat</option>
						<option value='repeat-x'>Repeat X</option>
						<option value='repeat-y'>Repeat Y</option>
				</select></td>
			</tr>		
</table>

	<h3><a href="#" class="expand" title="text">Text & Headers Color</a></h3>
<table width="100%" id="text" style="display:none;">
	<tr><td width="25%"><strong>ID</strong></td><td width="25%"><strong>Color</strong></td><td width="25%"><strong>Size</strong></td><td width="25%"><strong>Style</strong></td></tr>

	
			<tr><td>Header 1 (h1):</td>
			<td>
				<div class='colorSelector'>
					<div id='changeh1' style='background-color: {design_color['h1_color']}; width: 32px; height: 32px;'>
					<input type='hidden' id='h1_color' name='h1_color' value='{design_color['h1_color']}' /></div>
				</div>
			</td>
			<td><input type="text" size="4" value="{design_color['h1_size']}"></td>
			<td><input type="text" size="4" value="{design_color['h1_weight']}"></td>
			</tr>		
			

</table>
	<h3><a href="#" class="expand" title="width">Width & Height</a></h3>
<table width="100%" id="width" style="display:none;">
	<tr><td width="15%"><strong>ID</strong></td><td width="15%"><strong>Width</strong></td><td width="15%"><strong>Height</strong></td><td width="17%"><strong>Padding</strong></td><td width="25%"><strong>Margin</strong></td></tr>

	
			<tr><td><strong>Header</strong></td>
				<td><input type="text" size="4" id="header_width" name="header_width" value="{design_color['header_width']}" disabled></td>
				<td><input type="text" size="4" id="header_height" name="header_height" value="{design_color['header_height']}">px</td>
				<td><input type="text" size="4" id="header_padding" name="header_padding" value="{design_color['header_padding']}">px (Advanced)</td>
				<td><input type="text" size="4" id="header_margin" name="header_margin" value="{design_color['header_margin']}">px (Advanced)</td>
			</tr>
			<tr><td><strong>Footer</strong></td>
				<td><input type="text" size="4" id="footer_width" name="footer_width" value="{design_color['footer_width']}" disabled></td>
				<td><input type="text" size="4" id="footer_height" name="footer_height" value="{design_color['footer_height']}">px</td>
				<td><input type="text" size="4" id="footer_padding" name="footer_padding" value="{design_color['footer_padding']}">px (Advanced)</td>
				<td><input type="text" size="4" id="footer_margin" name="footer_margin" value="{design_color['footer_margin']}">px (Advanced)</td>
			</tr>		
			

</table>
<table>
	<td><input type='submit' value='Save Design Form' class='uiButton uiButtonConfirm'></td>
</table>
</form>
